<template>
	<view class="card-item" @tap="handleClick(data)">
		<view class="card-img">
			<image :src="data.img" mode="widthFix" class="img"></image>
		</view>
		<view class="info">
			<view class="name one-hidden">
				{{data.name}}
			</view>
			<view class="brief one-hidden">
				{{data.brief}}
			</view>
			<view class="price one-hidden">
				<text class="">￥</text>
				{{data.price}}
				<text class="text">起</text>
			</view>
			<view class="btn-box" >
				<text class="btn">立即购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: Object
		},
		data() {
			return {

			};
		},
		methods: {
			handleClick(e) {
				console.log('点击了商品',e);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.card-item {
		box-sizing: border-box;
		width: 50%;
		padding: 0 10rpx;

		.card-img {
			width: 100%;

			.img {
				width: 100%;
			}
		}

		.info {
			text-align: center;
			padding: 20rpx;

			.name {
				font-size: 30rpx;
			}

			.brief {
				margin-top: 4rpx;
				font-size: 22rpx;
				color: rgba(0, 0, 0, .54);
			}

			.price {
				margin-top: 4rpx;
				color: #ea625b;
				position: relative;
				.text {
					font-size: 20rpx;
					margin-left:4rpx;
				}
			}
			.btn-box{
				margin: 30rpx 0;
				.btn{		
				padding: 14rpx 40rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
				letter-spacing: 4rpx;
				color: #FFF;
				    background: #ea625b
				}
			}
		}

	}
</style>
